<template>
  <view class="container">
    <login-bar :top="-20"></login-bar>
    <view class="share-rule" v-if="eventsDetail?.isConfigShare && eventsDetail?.timeStatus?.status === 1">
      <view class="title">
        <view style="display:flex;height:36rpx;align-items: center;">
          <view class="fts-b">邀新免减</view>
          <view class="line"></view>
          <view class="fts-b">单人减{{eventsDetail?.deductionAmount / 100}}元</view>
          <view class="fts-s">（上限{{eventsDetail?.deductionLimitAmount / 100}}元）</view>
        </view>
        <button class="btn u-center" @click="loginJudge" :open-type="customerId ? 'share' : ''">去邀请</button>
      </view>
      <view class="people-num u-center">
        <view>已拉新<text class="ft">{{eventsDetail.invitationInfo?.invitationNum}}</text>人 当前活动已减免<text class="ft">{{eventsDetail.invitationInfo?.deductionAmount / 100}}</text>元</view>
        <view class="avatar u-center">
          <img :src="record.invitedCustomerFaceUrl" class="img" v-for="record in eventsDetail.invitationInfo?.invitationRecord" :key="record.invitedCustomerId">
          <view style="margin-left:6rpx">
            <uni-icons type="more-filled" size="24" v-if="eventsDetail.invitationInfo?.invitationNum > 8" color="#999999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="swiper-padding">
      <view  class="content">
        <Barrage :barrageData="bulletData.bullet" class="barrage-canvas"></Barrage>
        <view class="price-content">
          <view class="price">
            <text style="font-size:36rpx">{{ eventsDetail.bigFee }}</text>
            <text>{{ eventsDetail.smallFee }}</text>
          </view>
          <view class="tips">{{ eventsDetail.feeConfigType === 1 ? '元起' : '元'}}</view>
        </view>
        <swiper
          class="swiper introduce_img"
          circular
          indicator-dots
          indicator-color="rgba(255,255,255,0.4)"
          indicator-active-color="#ffffff"
          autoplay>
          <swiper-item class="swiper-item" v-for="(item, index) in carouselImageData.carouselImageList" :key="index">
            <image class="introduce_img" style="width: 100%; height: 100%" mode="aspectFill" :src="item"></image>
          </swiper-item>
        </swiper>
        <view class="view-title">
          {{ eventsDetail.eventsName }}
        </view>
        <!-- 地址部分 -->
        <view class="view-base-info">
          <view class="address">
            <view>地址：</view>
            <view style="flex:1;color:#3289CA" @click="openLocation">{{ eventsDetail.eventsAddress }}</view>
          </view>
          <view class="steps-row">
            <view class="step-container">
              <view class="row-line-item" v-for="n in 4" :key="n">
                <view class="steps__row-line row-line--before" :style="{backgroundColor: n === 1 ? 'transparent' : ''}"></view>
                <view class="steps-row-circle">
                  <image src="https://img.qumoyugo.com/webimgbg/picopino_icon_jiaoban_d.svg" style="width: 100%;height: 100%;"></image>
                </view>
                <view class="steps__row-line row-line--after" :style="{backgroundColor: n === 4 ? 'transparent' : ''}"></view>
              </view>
            </view>
            <view class="row-text-container">
              <view class="row-text">
                <view class="row-title">报名开始</view>
                <view class="row-desc">{{eventsDetail.signUpStart?.substr(5)}}</view>
              </view>
              <view class="row-text">
                <view class="row-title">报名结束</view>
                <view class="row-desc">{{eventsDetail.signUpEnd?.substr(5)}}</view>
              </view>
              <view class="row-text">
                <view class="row-title">活动开始</view>
                <view class="row-desc">{{eventsDetail.eventsStartTime?.substr(5)}}</view>
              </view>
              <view class="row-text">
                <view class="row-title">活动结束</view>
                <view class="row-desc">{{eventsDetail.eventsEndTime?.substr(5)}}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 报名人数 -->
        <view class="number-content">
          <view>已报名：{{eventsDetail.personNum}} 人{{ !eventsDetail.personNum ?'，虚席以待': '' }}</view>
          <view class="events-touxiang">
            <view v-for="(item, index) in eventsDetail.avatarImageList" :key="index">
              <view class="avater u-center">
                <image v-if="index !== 13" :src="item || 'https://img.qumoyugo.com/img/KVMDUYZENP1FULBFYB9PG1701333601947.png'" mode="aspectFill" style="width: 100%;height: 100%;"></image>
                <uni-icons type="more-filled" size="24" color="#CBCBCB" v-if="index === 13"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-padding">
      <view class="content">
        <view class="tab_nav">
          <view class="navTitle" @click="checked(0)">
            <view class="title_tabs u-center" :class="{ active: isActive === 0 }">
              <img style="width: 40rpx;height: 40rpx;margin-right: 6rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_active_n.svg" v-if="isActive === 0">
              活动详情
            </view>
          </view>
          <view class="navTitle" @click="checked(1)">
            <view class="title_tabs  u-center" :class="{ active: isActive === 1 }">
              <img style="width: 40rpx;height: 40rpx;margin-right: 6rpx;" src="https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_active_pj.png" v-if="isActive === 1">
              客户评价
            </view>
          </view>
        </view>
        <view class="nav_item" v-if="isActive === 0">
          <ParseSelf :content="introduceData"></ParseSelf>
        </view>
        <view class="nav_item_2" v-if="isActive === 1">
          <view v-if="reviewData.list.length > 0">
            <view :key="idx" v-for="(item, idx) in reviewData.list" class="review_div" :style="idx === 0 ? 'margin-top:0;' : ''">
              <uni-card :isFull="true" shadow="none" :border="false" margin="0" spacing="0" padding="0"
                thumbnail="https://img.qumoyugo.com/img/NJXGNPNBo2oRU8XYXBE5T1668563312974.png">
                <template v-slot:title>
                  <view class="review_title">
                    <image class="review_faceUrl" :src="item.customerInfo?.faceUrl"/>
                    <view style="flex:1; padding-left: 20rpx">
                      <view>
                        <view class="user_name_div">
                          <view class="user_name_txt">{{ item.username }}</view>
                        </view>
                        <span class="review_time"> {{ item.createdAt.replaceAll('-', '.').substr(0, 16) }} </span>
                      </view>
                      <view class="star-level">
                        <image class="itmsf" v-for="level in 5" :key="level" :src="item.starLevel >= level ? 'https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_active_pfs.png' : 'https://img.qumoyugo.com/webimgbg/picopino_icon_events_dt_pingfen.png'"></image>
                      </view>
                    </view>
                  </view>
                </template>
                <template v-slot:actions>
                  <view class="review_video_div">
                    <view v-for="(img,imgIdx) in item.reviewImageList" :key="imgIdx" class="review_img_div_video">
                      <image class="review_img" mode="aspectFill" :src="img.imageUrl"
                             @click="previewImg(item.reviewImageList,imgIdx)"  style="position: absolute"></image>
                    </view>
                  </view>
                  <view class="review_video_div">
                    <view v-for="(video,imgIdx) in item.reviewVideoList" :key="imgIdx" class="review_img_div_video">
                      <image class="review_img" mode="aspectFill" :src="video.firstFrameUrl" style="position: absolute;z-index: 1;border-radius: 18rpx"></image>
                      <view style="background: #999999;opacity: 0.5;position: absolute;width: 100%;height: 100%;z-index: 2;text-align: center;border-radius: 18rpx" @click="playVideo(video)">
                        <image style="width: 58.33rpx;height: 57.64rpx;margin-top: 62rpx" src="https://img.qumoyugo.com/img/7RDBO0VXHSBOJ5OWO6UE1689299766095.png" />
                      </view>
                    </view>
                  </view>
                  <view class="review_content" :class="idx % 2 ? 'odd' : 'even'">
                    {{ item.content }}
                  </view>
                </template>
              </uni-card>
            </view>
          </view>
          <view class="no-data" v-if="reviewData.list.length === 0">
            <EmptyBox :title="eventsDetail.timeStatus?.status === 4 ? '暂无评论哦～' : '还未开始评论哦'"  img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png"> </EmptyBox>
          </view>
        </view>
      </view>
    </view>
    <view class="booking_div">
      <button class="opt-btn"  @click="loginJudge" :open-type="customerId ? 'share' : ''">
        <image class="share-image" src="https://img.qumoyugo.com/webimgbg/avtivity_detail_share_icon.svg"></image>
        分享
      </button>
      <button class="opt-btn" open-type="contact">
        <image class="share-image" src="https://img.qumoyugo.com/webimgbg/activity_detail_service_icon.svg"></image>
        客服
      </button>
      <view class="booking" @click="navigateTo(eventsDetail)">
        <template v-if="eventsDetail.selfSupport === 0">
          <view class="u-center" style="flex-direction: column;">
            <view>点击右侧</view>
            <view class="u-center">
              去了解
              <img src="https://img.qumoyugo.com/img/MBREUYEQA6K8EPV35CF8S1716877847848.png" style="width:28rpx;height:28rpx;margin-left:4rpx">
            </view>
          </view>
          <view class="sbtn u-center" :class="eventsDetail.timeStatus?.status === 1 && !eventsDetail.eventsOrderId ? 'yellow' : ''">
            去了解
          </view>
        </template>
        <template v-if="eventsDetail.selfSupport === 1">
          <view class="u-center" style="flex-direction: column;width: 96rpx">
            <view style="font-size: 30rpx;font-weight:bold">{{ eventsDetail.remainStockNum }}</view>
            <view>剩余名额</view>
          </view>
          <view
            class="sbtn u-center"
            :class="eventsDetail.timeStatus?.status === 1 && !eventsDetail.eventsOrderId ? 'yellow' : ''">
            {{eventsDetail.timeStatus?.status === 1 && eventsDetail.eventsOrderId ? '已报名' : eventsDetail.timeStatus?.buttonName}}
            <text style="font-size: 24rpx;font-weight: 400" v-if="eventsDetail.timeStatus?.status === 1 && eventsDetail.singUpTimes">
              {{ eventsDetail.singUpTimes && eventsDetail.selfSupport === 0 ? '(点击联系报名)' : '(点击查看订单)' }}
            </text>
          </view>
        </template>
        <!-- <text class="u-center" style="width: 96rpx">{{ eventsDetail.isLimitPerson === '2' ? `人数限制${eventsDetail.minPersonNum}-${eventsDetail.maxPersonNum} 人` : '人数不限' }}</text> -->
        <!-- <view
          class="sbtn u-center"
          :class="eventsDetail.timeStatus?.status === 1 && !eventsDetail.eventsOrderId ? 'yellow' : ''">
          {{eventsDetail.timeStatus?.status === 1 && eventsDetail.eventsOrderId ? '已报名' : eventsDetail.timeStatus?.buttonName}}
          <text style="font-size: 24rpx;font-weight: 400" v-if="eventsDetail.timeStatus?.status === 1 && eventsDetail.singUpTimes">
            {{ eventsDetail.singUpTimes && eventsDetail.selfSupport === 0 ? '(点击联系报名)' : '(点击查看订单)' }}
          </text>
        </view> -->
      </view>
    </view>
    <!-- <SelfToast ref="joinActivToast" type="center" title="" :content="contentActivToast"></SelfToast> -->
    <TipPopup ref="tipPopupLogin" :option="popupTipsOption">
      <template v-if="popupTipsOption.type === 1">
        <button class="share-btn u-center" open-type="share">直接分享</button>
        <button class="login-btn u-center" @click="gotoLogin">立即登录</button>
      </template>
      <template v-if="popupTipsOption.type === 2">
        <button class="share-btn u-center" style="width:280rpx" @click="gotoLogin">立即登录</button>
      </template>
      <template v-if="popupTipsOption.type === 3">
        <button class="share-btn u-center" style="width:280rpx" @click="() => tipPopupLogin.close()">知道啦</button>
      </template>
      <template v-if="popupTipsOption.type === 4">
        <button class="order-btn u-center" style="width:280rpx" @click="gotoOrderDetail(eventsDetail)">去看看</button>
      </template>
    </TipPopup>
    <TipPlain ref="tipPopupPlain" :option="{subTitle: eventsDetail.scanCodePrompt}">
      <view class="img-code">
        <image :src="eventsDetail.receiptImage" style="width: 400rpx;height: 400rpx;" show-menu-by-longpress></image>
      </view>
    </TipPlain>
  </view>
</template>
<script setup>
import { onLoad, onPullDownRefresh, onReachBottom, onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
import { storage, urlGetObj, urlParams } from '@/utils/utils'
import EmptyBox from '@/components/emptyBox'
import Barrage from '@/components/barrage'
import { REGISTER_FORM_MP, REGISTER_CUSTOMER_ID, REGISTER_HELP_SUCCESS, ACTIVITY_ORDER_INFO } from '@/assets/js/config'
import { ref, computed, getCurrentInstance } from 'vue'
import { useStore } from '@/store'
// import SelfToast from '@/components/SelfToast'
import TipPopup from '@/components/popup/tipPopup'
import TipPlain from '@/components/popup/plain'
import ParseSelf from '@/components/parseSelf'
const { $https, $subscribeMessage } = getCurrentInstance().appContext.config.globalProperties
const store = useStore()
const videoSrc = ref('')
const poster = ref('')
const optionsData = ref({})
const introduceData = ref(null)
const eventsDetail = ref({})
// const joinActivToast = ref(null)
const contentActivToast = ref('')
const tipPopupLogin = ref(null) // 登录弹框
const tipPopupPlain = ref(null) // 订单信息弹框
const popupTipsOption = ref({
  subTitle: '',
  title: '',
  img: '',
  type: 0 // 1登录，2好友分享登录， 3分享成功
}) // 弹框说明
const customerId = computed(() => {
  return store.state.profile?.attr?.customerId
})
const isActive = ref(0)
const bulletData = ref({
  bullet: []
})
const carouselImageData = ref({
  carouselImageList: []
})
const openLocation = () => {
  uni.openLocation({
    type: 'gcj02',
    latitude: Number(eventsDetail.value.latitude),
    longitude: Number(eventsDetail.value.longitude),
    scale: 18,
    name: eventsDetail.value.locationName,
    address: eventsDetail.value.eventsAddress
  })
}
const reloadData = ref({
  reload: false,
  status: 'more',
  contentText: {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '我是有底线的~'
  }
})
const reviewData = ref({
  query: {
    page: 1,
    pageSize: 10,
    reviewStatus: 3,
    reviewType: '0',
    eventsId: ''
  },
  total: 0,
  list: []
})
const navigateTo = data => {
  if (!customerId.value) {
    gotoLogin()
    return false
  }
  const tmplIds = ['60CXU-m1X3myY4Yge2j5SynqFOyd9MD2qOZMtkzuNaM', 'Q23eeYUPFln9BUuy4PPGTXDD3EOpXYnYppcq-ecWjpI']
  $subscribeMessage(tmplIds, (res) => {
    console.log(res)
  })
  if (data.timeStatus.status !== 1) return
  if (data.selfSupport === 0) {
    if (data.eventsOrderId) {
      tipPopupPlain.value.show()
    } else {
      $https({
        url: '/app/eventsInfo/enroll',
        type: '',
        method: 'post',
        data: {
          id: data.id
        }
      }).then(res => {
        if (res.code === 0) {
          getEventsData()
          contentActivToast.value = res.msg
          uni.showToast({
            title: res.msg,
            icon: 'none',
            success: () => {
              setTimeout(() => {
                tipPopupPlain.value.show()
              }, 1000)
            }
          })
        }
      })
    }
  } else {
    if (data.eventsOrderId) {
      tipPopupLogin.value.show()
      popupTipsOption.value = {
        title: '',
        subTitle: '您已报名，点击查看订单',
        img: 'https://img.qumoyugo.com/img/MASBUOYAFA2TETSL7XU7G1698919148763.png',
        type: 4,
        click: true
      }
    } else {
      if (eventsDetail.value.remainStockNum) {
        uni.navigateTo({ url: `/events/eventsPay?id=${data.id}` })
      } else {
        uni.showToast({
          title: '该活动已报满~',
          icon: 'none'
        })
      }
    }
  }
}
onLoad(async options => {
  if (options.scene) {
    const res = await $https({
      url: `/common/param/${options.scene}`,
      type: ''
    })
    if (res.code === 0) {
      optionsData.value = urlGetObj(res.data)
    }
  } else {
    optionsData.value = options
  }
  if (optionsData.value.orgin) {
    storage.set(REGISTER_FORM_MP, optionsData.value.orgin)
  }
  if (optionsData.value.rmd) {
    storage.set(REGISTER_CUSTOMER_ID, optionsData.value.rmd)
  }
  getReviewData()
  getEventsData()
})
onShow(() => {
  const orderInfo = storage.get(ACTIVITY_ORDER_INFO)
  if (orderInfo) {
    getEventsData()
  }
  if (storage.get(REGISTER_HELP_SUCCESS)) {
    setTimeout(() => {
      tipPopupLogin.value.show()
      popupTipsOption.value = {
        title: '帮好友助力成功',
        subTitle: '和伙伴们一起来参加活动吧！',
        img: 'https://img.qumoyugo.com/img/MASBUOYAFA2TETSL7XU7G1698919148763.png',
        type: 3,
        click: true
      }
      storage.remove(REGISTER_HELP_SUCCESS)
    }, 1000)
  }
})
const beforeDraw = () => {
  return new Promise((resolve, reject) => {
    resolve(
      (bulletData.value.bullet = bulletData.value.bullet.map(item => {
        return Object.assign(
          { blessContent: item }
        )
      }))
    )
  })
}
// 登录判断
const loginJudge = () => {
  if (!customerId.value) {
    tipPopupLogin.value.show()
    popupTipsOption.value = {
      subTitle: '登录后，分享可获得邀新优惠哦 ！',
      img: 'https://img.qumoyugo.com/img/OBSD3227VG27SG6D2HFJ1698919148743.png',
      type: 1
    }
  }
}
// 跳转登录
const gotoLogin = () => {
  console.log(urlParams(optionsData.value), optionsData.value)
  uni.reLaunch({
    url: `/pages/login?redirect=${encodeURIComponent('/events/eventsDetail?')}${urlParams(optionsData.value)}`,
    success: () => {
      tipPopupLogin.value.close()
    }
  })
}
// 下拉刷新，请求第一页
onPullDownRefresh(() => {
  Promise.all([getEventsData(), getReviewData()]).then(row => {
    uni.stopPullDownRefresh()
  })
})
// 上拉加载
onReachBottom(() => {
  if (reviewData.value.total > reviewData.value.list.length) {
    reloadData.value.status = 'loading'
    reviewData.value.query.page += 1
    getReviewData()
  } else {
    reloadData.value.status = 'no-more'
  }
})
const checked = idx => {
  isActive.value = idx
}
const previewImg = (item, index) => {
  const imgArray = item.map(m => m.imageUrl)
  uni.previewImage({
    current: index,
    urls: imgArray
  })
}
const playVideo = param => {
  videoSrc.value = param.fileUrl
  poster.value = param.firstFrameUrl
  uni.navigateTo({
    url: '/user/toiletry/showVideo?videoSrc=' + videoSrc.value + '&poster=' + poster.value
  })
}
const gotoOrderDetail = (data) => {
  tipPopupLogin.value.close()
  uni.navigateTo({ url: `/user/order/eventsDetail?eventsId=${data.id}&orderId=${data.eventsOrderId}` })
}
// 获取评论信息
const getReviewData = () => {
  reviewData.value.query.eventsId = optionsData.value.id
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/reviewInfo/page/list',
      type: '',
      method: 'get',
      data: reviewData.value.query
    })
      .then(res => {
        if (res.code === 0) {
          reviewData.value.list = reviewData.value.list.concat(res.data.items)
          reviewData.value.total = res.data.pagination.total_record
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
// 获取活动数据
const getEventsData = () => {
  const id = optionsData.value.id
  const data = {}
  if (optionsData.value.preview) {
    data.preview = optionsData.value.preview
  }
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/eventsInfo/' + id,
      type: '',
      method: 'get',
      data
    })
      .then(res => {
        if (res.code === 0 && !!res.data) {
          eventsDetail.value = res.data
          processData()
          carouselImageData.value.carouselImageList = res.data.detailImages
          bulletData.value.bullet = res.data.canvasList
          introduceData.value = res.data.detailedInfo
          beforeDraw()
          // 价格 feeConfigType 1 组合 0 单人
          const _fee = res.data.feeConfigType === 1 ? res.data.minPackagePrice / 100 + '' : res.data.eventsExpensePerson / 100 + ''
          const _price = _fee.split('.')
          eventsDetail.value.bigFee = _price[0]
          eventsDetail.value.smallFee = _price[1] ? '.' + _price[1] : '.00'
          // 请求分享数据
          if (eventsDetail.value.isConfigShare) {
            if (customerId.value) {
              getEventShare(id)
            } else {
              if (optionsData.value.share) {
                // 弹框登录
                tipPopupLogin.value.show()
                popupTipsOption.value = {
                  title: '立即登录 帮好友助力',
                  img: 'https://img.qumoyugo.com/img/OBSD3227VG27SG6D2HFJ1698919148743.png',
                  type: 2
                }
              }
            }
            eventsDetail.value.invitationInfo = {
              invitationNum: res.data.invitationInfo.invitationNum || 0,
              deductionAmount: res.data.invitationInfo.deductionAmount || 0,
              invitationRecord: res.data.invitationInfo.invitationRecord || []
            }
          }
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
const eventsEnroll = ref({})
const processData = () => {
  const list = eventsDetail.value.avatarImageList
  if (!list.length) {
    eventsDetail.value.avatarImageList = ['', '', '', '', '', '', '']
  } else if (list.length > 13) {
    eventsDetail.value.avatarImageList = list.slice(0, 14)
  }
}
const getEventShare = (id) => {
  $https({
    url: '/app/eventsInfo/enroll/' + id,
    type: '',
    method: 'get'
  }).then(res => {
    if (res.code === 0) {
      eventsEnroll.value = res.data
    }
  })
}
onShareAppMessage(() => {
  let path = '/events/eventsDetail?entryType=1&id=' + eventsDetail.value.id
  if (customerId.value) {
    path += '&rmd=' + customerId.value
  }
  if (eventsDetail.value.isConfigShare) {
    path += '&share=1'
  }
  return {
    title: eventsDetail.value.eventsName,
    imageUrl: eventsDetail.value.shareImage,
    path
  }
})
onShareTimeline(() => {
  return {
    title: eventsDetail.value.eventsName,
    imageUrl: eventsDetail.value.shareImage,
    path: '/events/eventsDetail?id=' + eventsDetail.value.id + '&customerId=' + customerId.value
  }
})
</script>
<style lang="scss" scoped>
@import "@/assets/styles/minx.scss";
.fullscreen-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10000;
  cursor: pointer;
}
.close-button image {
  width: 24px;
  height: 24px;
}
.container {
  background: #FFF8F0;
  width: 100vw;
  overflow: hidden;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.swiper-padding {
  .content {
    position: relative;
    .price-content{
      width: 172rpx;
      height: 172rpx;
      background: url(https://img.qumoyugo.com/webimgbg/picopino_events_det_price_bg.png) no-repeat;
      background-size: 100%;
      position: absolute;
      top: 900rpx;
      right: 24rpx;
      z-index: 10;
      padding: 56rpx 24rpx 0 30rpx;
      font-size: 18rpx;
      color: #F9C687;
      .price{
        font-weight: bold;
        font-size: 26rpx;
        display: flex;
        line-height: 36rpx;
        justify-content: center;
      }
      .tips{
        text-align: right;
      }
    }
    .barrage-canvas {
      position: absolute;
      height: 188rpx;
      width: 100%;
      background: rgba(255, 255, 255, 0); /*关键点*/
      position: absolute;
      z-index: 2; /*确保在遮盖的元素的上方*/
      top: 0px;
      left: 0px;
    }
    .view-title {
      color: #000;
      font-size: 40rpx;
      font-weight: bold;
      line-height: 50rpx;
      background-color: #ffffff;
      padding: 30rpx;
      // border-radius: 30rpx 30rpx 0 0;
      // margin-top: -30rpx;
      // position: relative;
    }
    .view-base-info{
      margin: 10rpx 0;
      background-color: #ffffff;
      padding: 0 30rpx;
    }
    .address{
      padding: 40rpx 0;
      position: relative;
      display: flex;
      color: #000;
      font-size: 26rpx;
      &::before{
        @include border(bottom, #EAEAEA)
      }
    }
    .steps-row{
      padding: 50rpx 0;
      .row-text-container{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        font-size: 24rpx;
        line-height: 26rpx;
        text-align: center;
        color: #414141;
      }
      .row-desc{
        font-weight: bold;
        margin-top: 12rpx;
      }
      .row-text{
        display: inline-flex;
        flex: 1;
        flex-direction: column;
      }
    }
    .step-container{
      display: flex;
      flex-direction: row;
      padding-bottom: 30rpx;
      .row-line-item{
        display: inline-flex;
        flex-direction: row;
        flex: 1;
        height: 14px;
        line-height: 14px;
        align-items: center;
        justify-content: center;
      }
      .steps__row-line{
        flex: 1;
        height: 1px;
        background-color: #FFECD6;
      }
      .row-line--before{
        transform: translateX(-1px);
      }
      .row-line--after{
        transform: translateX(1px);
      }
      .steps-row-circle{
        width: 40rpx;
        height: 40rpx;
        margin: 0 24rpx;
      }
      .steps-row{
        display: flex;
        flex-direction: column;
      }
    }
    .number-content {
      margin: 10rpx 0;
      padding: 40rpx 0 40rpx 30rpx;
      font-size: 26rpx;
      line-height: 26rpx;
      background-color: #fff;
      color: #414141;
      .events-touxiang{
        display: flex;
        flex-wrap: wrap;
      }
      .avater{
        width: 70rpx;
        height: 70rpx;
        margin-top: 30rpx;
        margin-right: 30rpx;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .swiper {
      height: 134vw;
      background: #ffffff;
    }

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
    }
  }
}
.share-rule{
  margin-bottom: 10rpx;
  height: 268rpx;
  background-color: #fff;
  .title{
    height: 82rpx;
    background-color: #FFF6EF;
    padding: 13rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .fts-b{
    color: #850000;
    font-size: 34rpx;
    font-weight: bold;
    line-height: 34rpx;
    letter-spacing: 1px;
  }
  .fts-s{
    color: #666;
    font-size: 20rpx;
    line-height: 22rpx;
    height: 22rpx;
    align-self: flex-end;
  }
  .line{
    width: 1px;
    height: 30rpx;
    background-color: rgba(133, 0, 0, 0.60);
    margin: 0 8rpx;
  }
  .btn{
    width: 140rpx;
    height: 56rpx;
    background-color: #EE751E;
    border-radius: 28rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
    margin: 0;
    letter-spacing: 1px;
  }
  .people-num{
    height: 186rpx;
    flex-wrap: wrap;
    font-size: 30rpx;
    color: #333;
    padding: 24rpx 0;
    .ft{
      color: #EE751E;
      font-size: 36rpx;
      font-weight: bold;
      padding: 0 4rpx;
    }
    .avatar{
      .img{
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin: 0 6rpx;
      }
    }
  }
}
.detail-padding {
  padding: 40rpx 30rpx 0 30rpx;
  .content {
    .introduce_img {
      box-shadow: 0rpx 2rpx 3rpx 0rpx #e5e5e5;
      border-radius: 18rpx;
    }

    .tab_nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500rpx;
      height: 80rpx;
      border-radius: 1000px;
      background: #FFF;
      box-shadow: 0px 0px 10px 0px rgba(252, 219, 171, 0.40);
      margin: 0 auto;
    }

    .tab_nav .navTitle {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      color: #414141;
      height: 80rpx;
    }
    .title_tabs{
      height: 80rpx;
      border-radius: 1000px;
    }
    .active {
      color: #000;
      font-weight: bold;
      margin: 6rpx;
      background: #FCDBAB;
      height: 68rpx;
    }
    .nav_item,.nav_item_2 {
      margin-top: 46rpx;
    }
    .review_div {
      margin-top: 24rpx;
    }

    .review_faceUrl {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }

    .review_title {
      padding: 20rpx 0 14rpx 0;
      display: flex;
      width: 100%;
    }

    .review_time {
      font-size: 24rpx;
      font-weight: 400;
      color: #414141;
      float: right;
      margin-top: 2rpx;
      margin-right: 30rpx;
    }

    .user_name_txt {
      display: inline-block;
      white-space: nowrap;
      margin-right: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 26rpx;
      color: #000;
    }

    .user_name_div {
      display: inline-block;
    }
    .star-level{
      margin-top: 6rpx;
      display: flex;
      padding: 3rpx 6rpx;
      background-color: rgba(0,0,0,0.06);
      border-radius: 6rpx;
      .itmsf{
        width: 24rpx;
        height: 24rpx;
      }
    }
    .review_img {
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 18rpx;
    }

    .review_img_div {
      padding: 20rpx;
      width: 210rpx;
      height: 210rpx;
      display: inline-block;
    }
    .review_img_div_video{
      width: 188rpx;
      height: 188rpx;
      display: inline-block;
      position: relative;
      margin: 20rpx 20rpx 20rpx 0;
      border-radius: 20rpx;
    }
    .review_content {
      font-size: 26rpx;
      color: #000;
      padding-bottom:45rpx;
      background: url(https://img.qumoyugo.com/webimgbg/picopino_line_bowen1.png) no-repeat bottom center;
      background-size: 100%;
      &.even{
        background: url(https://img.qumoyugo.com/webimgbg/picopino_line_bowen0.png) no-repeat bottom center;
        background-size: 100%;
      }
    }
    .review_video_div,
    video {
      width: 100%;
      height: 100%;
    }
  }
}
.booking_div {
  position: fixed;
  bottom: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  min-height: 70px;
  width: 100%;
  background-color: #ffffff;
  left: 0;
  padding: 10rpx 30rpx 0 54rpx;
  z-index: 98;
  display: flex;
  &::before{
    @include border(top, #ddd)
  }
  .opt-btn{
    background: rgba(0, 0, 0, 0);
    padding: 0;
    width: 50rpx;
    margin: 0 52rpx 0 0;
    font-size: 22rpx;
    line-height: 22rpx;
    text-align: center;
    margin-top: 12rpx;
    .share-image {
      width: 50rpx;
      height: 50rpx;
      display: block;
      margin-bottom: 6rpx;
    }
  }
  .booking {
    width: 466rpx;
    height: 100rpx;
    background: #000;
    border-radius: 1000rpx;
    font-size: 22rpx;
    color: #F0E95C;
    line-height: 22rpx;
    padding: 10rpx 10rpx 10rpx 30rpx;
    display: flex;
    justify-content: space-between;
    line-height: 30rpx;
    text-align: center;
    .sbtn{
      width: 300rpx;
      height: 80rpx;
      border-radius: 1000px;
      background:#FCDBAB;
      font-size: 30rpx;
      font-weight: bold;
      color: #414141;
      &.yellow{
        background: #F0831E;
        color: #fff;
      }
    }
  }
}
.no-data {
  text-align: center;
  color: #999999;
  padding: 40rpx 0;
  .img {
    width: 386rpx;
    height: 326rpx;
    margin-bottom: 20rpx;
  }
}
.login-btn, .share-btn{
  width: 220rpx;
  height: 80rpx;
  position: relative;
  border-radius: 40rpx;
  font-size: 32rpx;
}
.login-btn{
  background: #EE751E;
  color:#ffffff;
  &::before{
    @include border(full, #999999, 40rpx)
  }
}
.share-btn{
  background: #E3E9FF;
  color:#333333;
  &::before{
    @include border(full, #333333, 40rpx)
  }
}
.order-btn{
  margin: 0 auto;
  position: relative;
  width: 250rpx;
  height: 74rpx;
  background: #F7B064;
  font-size: 30rpx;
  color: #000;
  border-radius: 1000px;
  &::before{
    @include border(full, #414141, 1000px)
  }
}
.img-code{
  width: 400rpx;
  height: 400rpx;
  margin: 30rpx auto;
}
:deep(.nav_item_2 .uni-card) {
  background-color: transparent !important;
  border-bottom: none;
}
</style>
